<template>
	<view class="">

		<view class="top_bg">

		</view>
		<view class="box_main">
			<view class="box_main_header">
				<view class="box_main_body">
					<image :src="uIfo.icon" style="width:110rpx;height:110rpx;border-radius: 50%;" mode="" />
					<view class="box_main_left_txt">
						<view style="font-size: 28rpx;">{{uIfo.realname}}</view>
						<view class="box_main_left_txt_bb">
							<image src="/static/img/user/zhuanyezhuanyeke.png" class="box_main_left_txt_img" mode="" />
							<view style="margin-right: 12rpx;">{{uIfo.userrank_name}}</view>
							<!-- <image src="/static/img/httpindex/order.png" class="box_main_left_txt_img" mode="" />
							<view style="margin-right: 12rpx;">代理申请</view> -->
						</view>
					</view>
				</view>
				<!-- <view class="box_main_right">
					推荐码：CYU8J5E6
					<image src="/static/img/httpindex/order.png" style="width: 30rpx;height:30rpx;margin-left: 6rpx;"
						mode="" />
				</view> -->
			</view>
			<view class="top_card">
				<view style="display: flex;color: #121212;">
					<view style="flex: 1;">
						<view style="font-size: 22rpx;">
							消费券
						</view>
						<view style="font-size: 36rpx;margin-top: 14rpx;font-weight: 600;">
							{{uIfo.hascp}}
						</view>
					</view>
					<view style="flex: 1;border-left: 1px solid #12AEAA;padding-left: 36rpx;">
						<view style="font-size: 22rpx;">
							财富值
						</view>
						<view style="font-size: 36rpx;margin-top: 14rpx;font-weight: 600;">
							{{uIfo.haswealth}}
						</view>
					</view>
				</view>
				<!-- <view style="display: flex;color: #121212;margin-top: 56rpx;">
					<view style="flex: 1;text-align: left;font-size: 22rpx;">
						收藏 <text style="font-size: 26rpx;margin-left: 22rpx;font-weight: 600;">0</text>
					</view>
					<view style="flex: 1;border-left: 1px solid #12AEAA;font-size: 22rpx;text-align: center;">
						关注 <text style="font-size: 26rpx;margin-left: 22rpx;font-weight: 600;">0</text>
					</view>
					<view style="flex: 1;text-align: right;font-size: 22rpx;border-left: 1px solid #12AEAA;">
						粉丝 <text style="font-size: 26rpx;margin-left: 22rpx;font-weight: 600;">0</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="main_body">
			<view style="display: flex;align-items: center;justify-content: space-between;padding: 16rpx 0;">
				<view style="font-size: 28rpx;">我的订单</view>
				<view style="font-size: 24rpx;" @tap="shopOrders(-1,'全部')">查看更多 ></view>
			</view>
			<view
				style="padding: 0 40rpx;font-size:26rpx;display: flex;align-items: center;justify-content: space-between;margin-top: 24rpx;">
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;"
					@tap="shopOrders(0,'待付款')">
					<image style="width:56rpx;height:51rpx;" src="@/static/img/user/daifukuan.png" mode="" />
					<view style="margin-top: 12rpx;">待付款</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;"
					@tap="shopOrders(1,'待发货')">
					<image style="width:56rpx;height:51rpx;" src="@/static/img/user/daifahuo.png" mode="" />
					<view style="margin-top: 12rpx;">待发货</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;"
					@tap="shopOrders(10,'待收货')">
					<image style="width:56rpx;height:51rpx;" src="@/static/img/user/daishouhuo.png" mode="" />
					<view style="margin-top: 12rpx;">待收货</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;"
					@tap="shopOrders(20,'已完成')">
					<image style="width:56rpx;height:51rpx;" src="@/static/img/user/daipingjia.png" mode="" />
					<view style="margin-top: 12rpx;">已完成</view>
				</view>
			</view>
			<image style="width:100%;height:150rpx;margin-top: 54rpx;border-radius: 12rpx;"
				src="@/static/img/user/introduce.png" />
			<view class="footer_box">
				<view style="margin-bottom: 30rpx;font-size: 28rpx;">其他服务</view>
				<view
					style="display: flex;align-items: center;justify-content: space-around;font-size: 24rpx;flex-wrap: wrap;">
					<view class="footer_box_card" style="text-align: center;" @tap="goAuth">
						<image style="width:84rpx;height:84rpx;margin-bottom: 4rpx;"
							src="/static/img/user/user-auth.png" mode="" />
						<view>账户认证</view>
					</view>
					<view class="footer_box_card" style="text-align: center;" @tap="invate();">
						<image style="width:84rpx;height:84rpx;margin-bottom: 4rpx;" src="/static/img/user/invate.png"
							mode="" />
						<view>邀请好友</view>
					</view>
					<view class="footer_box_card" style="text-align: center;" @tap="Setup">
						<image style="width:84rpx;height:84rpx;margin-bottom: 4rpx;" src="/static/img/user/set.png"
							mode="" />
						<view>设置</view>
					</view>
					<view class="footer_box_card" style="text-align: center;" @tap="address">
						<image style="width:84rpx;height:84rpx;margin-bottom: 4rpx;" src="/static/img/user/address.png"
							mode="" />
						<view>地址</view>
					</view>
					<view class="footer_box_card" style="text-align: center;">
						<image style="width:84rpx;height:84rpx;margin-bottom: 4rpx;" src="/static/img/user/kefu.png"
							mode="" />
						<view>客服</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				uIfo: {
					'icon': '/static/img/user/touxiang.png',
				},
				islogin: false,
				isShowKefu: false,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}

			this.loadData();

			uni.$on('changeNickname', (option) => {
				this.uIfo.nickname = option.nickname;
			})
		},
		onPullDownRefresh() {
			this.loadData()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000);
		},

		methods: {
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle() {
				this.isShowKefu = true;
			},

			async shopOrders(status, title) {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				let url = '/pages/user/user-order?status=' + status;
				uni.navigateTo({
					url: url
				})

			},

			async loadData() {
				uni.showLoading({
					title: '加载中...'
				});
				let token = uni.getStorageSync('token');

				if (!token) {
					this.$api.msg('token缺失！');
				}
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;

				this.uIfo = info;
				this.uIfo.rank_name = info.rank_name;
				this.uIfo.level_name = info.level_name;
				this.uIfo.icon = this.uIfo.icon ? this.uIfo.icon : '/static/img/user/touxiang.png';

				uni.hideLoading();
			},

			goAuth() {
				uni.navigateTo({
					url: '/pages/user/user-auth'
				})
			},

			vip() {
				uni.navigateTo({
					url: './vip'
				})
			},
			userData() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: './userData'
				})
			},

			address() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages/user/address'
				})
			},
			login() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},

			collect() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages/user/collect'
				})
			},

			look() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages/user/look'
				})
			},

			Setup() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}
				uni.navigateTo({
					url: '/pages/user/setup'
				})
			},

			Goyijian() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				uni.navigateTo({
					url: '/pages/user/user-yijian'
				})
			},

			goHome() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}
				uni.navigateTo({
					url: '/pages/finance/home'
				})
			},

			news() {
				uni.showToast({
					title: '正在升级',
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url: './news'
				// })
			},

			async callPhone() {
				uni.makePhoneCall({
					phoneNumber: ''
				});
			},

			//取消
			async cancle() {
				this.isShowKefu = false;
			},

			invate() {
				uni.navigateTo({
					url: '/pages/user/qrcode'
				})
			},

			//分享二维码
			goShare() {
				let usernumber = this.uIfo.usernumber;
				uni.navigateTo({
					url: '/pages/user/qrcode?tusernumber=' + usernumber
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f2f2f2;
	}
</style>
<style lang="scss">
	/* subpages2/text1/text1.wxss */
	.top_bg {
		background: #007bfd;
		height: 540rpx;
		position: absolute;
		top: 0;
		width: 100vw;
		z-index: -1;
	}

	.box_main {
		padding: 0 30rpx;
		box-sizing: border-box;
		padding-top: 100rpx;
		background-image: url('@/static/img/user/top_bg.png');
		background-repeat: 100% 100%;
	}

	.box_main_header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.box_main_body {
		display: flex;
		align-items: center;
	}

	.box_main_left_txt {
		margin-left: 24rpx;
		color: #fff;
	}

	.box_main_left_txt_bb {
		font-size: 22rpx;
		display: flex;
		align-items: center;
		margin-top: 14rpx;
	}

	.box_main_left_txt_img {
		width: 26rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}

	.box_main_right {
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 8rpx 24rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		margin-top: 6rpx;
	}

	.box_body_one {
		padding: 0 16rpx;
		margin-top: 46rpx;
	}

	.box_body_one_card {
		padding: 16rpx 28rpx;
		background: #083667;
		border-radius: 14rpx 14rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box_body_one_card_txt {
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
	}

	.top_card {
		border-radius: 14rpx;
		padding: 36rpx 26rpx;
		height: 200rpx;
		background: linear-gradient(to bottom, rgba(172, 255, 253, 0.5), rgba(205, 255, 254, 0.5));
		margin-top: 40rpx;
		box-sizing: border-box;
	}

	.main_body {
		position: relative;
		top: -30rpx;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		padding-bottom: 40rpx;
		color: #121212;
	}

	.footer_box {
		padding: 30rpx;
		box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.10);
		margin-top: 20rpx;
		padding-bottom: 0;
		border-radius: 12rpx;
	}

	.footer_box_card {
		width: 18%;
		margin-bottom: 28rpx;
	}

	.footer_box_card:last-child:nth-child(5n-1) {
		margin-right: calc(18% + 20% /10);
	}

	.footer_box_card:last-child:nth-child(5n-2) {
		margin-right: calc(18% * 2 +40% /10);
	}

	.footer_box_card:last-child:nth-child(5n-3) {
		margin-right: calc(18% * 3 + 60% /10);
	}

	.footer_box_card:last-child:nth-child(5n-4) {
		margin-right: calc(18% * 4 + 80% /10);
	}
</style>
